<script setup lang="ts" name="Count">//setup语法糖
import { ref, reactive, toRefs, toRef, computed, watch, watchEffect, defineExpose, defineProps, withDefaults, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
let name = ref('zhangsan') //ref响应式(RefImpl对象): 基本类型(数字,字符串), 对象(层级不深)
let cars = ref({ brand: '奔驰', price: 100 }) //ref对象(层级不深)
let car = reactive({ brand: '奔驰', price: 100 }) //reactive相应式(Proxy代理函数): 只能对象数组(层级深)
let { brand, price } = toRefs(car) //toRefs: 将reactive中k-v全转为ref,解构赋值为响应式(ObjectRefImpl)
let brands = toRef(car, 'brand') //toRef: 将reactive中某个k-v转为ref
let computedResult = computed({ //计算属性(ref响应式)
    get() {
    },
    set(val) {
    }
})
const stopWatch = watch(name, (newValue, oldValue) => { //监视ref基本类型,不写.value

})
watchEffect(() => { //自动监视:不用指定监视谁,用到就监视,立即监视(一上来就监视)

})
function generalMethod() { //一般方法

}

import { storeToRefs } from 'pinia' //只store转ref
import { useCountStore } from '@/store/count' //pinia读取数据
const countStore = useCountStore()
//console.log(countStore.sum)
//console.log(countStore.$state.sum)
function addSum() {
    countStore.sum += 1 //1.pinia修改数据
    countStore.$patch({ //2.pinia批量修改数据(执行1次)
        sum: 1,
        school: '北大'
    })
    countStore.increment(1) //3.pinia(actions方式修改数据)
}
const {sum, school, bigSum, upperSchool} = storeToRefs(countStore) //解构赋值(响应式)
</script>

<template> <!--template不编译-->
    <div class="component-name"> <!--vue3无需根标签-->
    </div>
    <div class="component-name">
        <button @click="addSum">pinia共享数据集中管理</button>{{ countStore.sum }}{{ countStore.school }}{{ bigSum }}{{ upperSchool }}
    </div>
</template>

<style lang="less" scoped>
//less嵌套写法,scoped域:样式只对当前组件有效
.component-name {}
</style>